<template>
  <div class="user-center-container">
    <el-row :gutter="20" class="user-center-content">
      <!-- 左侧导航栏 -->
      <el-col :span="5">
        <el-card class="user-menu-card">
          <template #header>
            <div class="user-header">
              <el-avatar :size="50" :src="avatarUrl" />
              <div class="user-info">
                <div class="user-name">{{ displayName }}</div>
                <div class="user-status">
                  <el-tag :type="isVerified ? 'success' : 'info'" size="small">
                    {{ isVerified ? '已认证' : '未认证' }}
                  </el-tag>
                </div>
              </div>
            </div>
          </template>
          
          <el-menu
            :default-active="activeMenu"
            class="user-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="个人信息">
              <i class="bi bi-person menu-icon"></i>
              <span class="menu-text">个人信息</span>
            </el-menu-item>
            <el-menu-item index="我的发布">
              <i class="bi bi-file-text menu-icon"></i>
              <span class="menu-text">我的发布</span>
            </el-menu-item>
            <el-menu-item index="点赞收藏">
              <i class="bi bi-star menu-icon"></i>
              <span class="menu-text">点赞收藏</span>
            </el-menu-item>
            <el-menu-item index="关注与粉丝">
              <i class="bi bi-people menu-icon"></i>
              <span class="menu-text">关注与粉丝</span>
            </el-menu-item>
            <el-menu-item index="帮助中心">
              <i class="bi bi-question-circle menu-icon"></i>
              <span class="menu-text">帮助中心</span>
            </el-menu-item>
            <el-menu-item index="设置">
              <i class="bi bi-gear menu-icon"></i>
              <span class="menu-text">设置</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      
      <!-- 右侧内容区域 -->
      <el-col :span="19" class="content-wrapper">
        <el-card class="content-card">
          <router-view></router-view>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useUserInfoStore from '@/stores/userInfo.js'

// 获取用户信息
const userInfoStore = useUserInfoStore()

// 更安全的属性访问方式
const avatarUrl = userInfoStore.info && userInfoStore.info.avatar 
  ? userInfoStore.info.avatar 
  : null

const displayName = userInfoStore.info 
  ? (userInfoStore.info.nickname || userInfoStore.info.username || '未知用户') 
  : '未知用户'

const isVerified = userInfoStore.info ? userInfoStore.info.isVerified : false

const route = useRoute()
const router = useRouter()

const activeMenu = ref('')

// 根据当前路由设置激活的菜单项
const setActiveMenu = () => {
  const routeName = route.name
  activeMenu.value = routeName
}

// 监听路由变化
watch(
  () => route.name,
  () => {
    setActiveMenu()
  },
  { immediate: true }
)

// 处理菜单选择
const handleMenuSelect = (index) => {
  router.push({ name: index })
}
</script>

<style scoped>
.user-center-container {
  padding: 0; /* 取消所有内边距，包括上边距 */
  background-color: #f5f5f5;
  min-height: calc(100vh - 120px);
  margin-top: 0; /* 取消上边距 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
}

.user-center-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px 15px 15px;
  min-height: calc(100vh - 120px - 32px);
  display: flex;
  align-items: stretch;
  width: 100%;
}

.user-menu-card {
  border-radius: 6px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  min-height: 100%; /* 占满容器高度 */
  height: 100%;
}

.user-menu-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-header .el-avatar {
  width: 40px; /* 缩小图片宽度 */
  height: 40px; /* 缩小图片高度 */
  border-radius: 50%;
}

.user-info {
  margin-top: 12px;
}

.user-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.user-status .el-tag {
  border: none;
}

.user-menu {
  border: none;
  margin-top: 15px;
}

.user-menu :deep(.el-menu-item) {
  height: 40px;
  line-height: 40px;
  border-radius: 3px;
  margin: 4px 0;
  padding-left: 15px !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* 新增菜单图标样式 */
.menu-icon {
  font-size: 1.1rem;
  margin-right: 0.5rem;
  width: 1.2rem;
  text-align: center;
}

.user-menu :deep(.el-menu-item)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: #409eff;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.user-menu :deep(.el-menu-item):hover {
  background-color: #ecf5ff;
  transform: translateX(4px);
}

.user-menu :deep(.el-menu-item):hover::before {
  transform: scaleY(1);
}

.user-menu :deep(.el-menu-item):hover .el-icon {
  transform: rotate(12deg) scale(1.1);
  color: #409eff;
}

.user-menu :deep(.el-menu-item.is-active) {
  background: linear-gradient(90deg, rgba(64, 158, 255, 0.2) 0%, rgba(64, 158, 255, 0.05) 100%);
  color: #409eff;
  font-weight: 500;
  transform: translateX(4px);
}

.user-menu :deep(.el-menu-item.is-active .el-icon) {
  color: #409eff;
}

.user-menu :deep(.el-menu-item.is-active)::before {
  transform: scaleY(1);
}

.content-wrapper {
  width: 85%;
}

.content-card {
  border-radius: 6px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  min-height: 100%; /* 占满容器高度 */
  height: 100%;
  transition: box-shadow 0.3s ease;
  flex: 1;
}

.content-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 图标动画 */
.el-icon {
  transition: transform 0.3s ease;
}

/* 响应式设计 - 中等屏幕 */
@media (max-width: 992px) {
  .user-center-content {
    max-width: 100%;
    padding: 0 10px 10px 10px;
  }
  
  .el-col:first-child {
    flex: 0 0 220px;
  }
}

/* 响应式设计 - 小屏幕 */
@media (max-width: 768px) {
  .user-center-content {
    flex-direction: column;
    padding: 0 10px 10px 10px;
  }
  
  .el-col {
    width: 100%;
    max-width: 100%;
  }
  
  .el-col:first-child {
    margin-bottom: 15px;
    flex: 0 0 auto;
  }
  
  .user-menu-card {
    margin-bottom: 0;
  }
  
  .user-menu :deep(.el-menu-item) {
    padding-left: 10px !important;
  }
}

/* 响应式设计 - 超小屏幕 */
@media (max-width: 576px) {
  .user-center-content {
    padding: 0 8px 8px 8px;
  }
  
  .el-col:first-child {
    margin-bottom: 10px;
  }
  
  .user-header {
    flex-direction: row;
    text-align: left;
    gap: 10px;
  }
  
  .user-info {
    margin-top: 0;
  }
  
  .user-name {
    font-size: 14px;
  }
  
  .menu-text {
    display: none;
  }
  
  .user-menu :deep(.el-menu-item) {
    justify-content: center;
    padding: 0 !important;
    width: 100%;
  }
  
  .user-menu :deep(.el-menu-item .el-icon) {
    margin-right: 0;
  }
  
  .content-card {
    min-height: 400px;
  }
}
</style>